<template>
	<view class="container">
		<view class="carousel-section" v-if="userInfo">
			<view class="user-info">
				<image :src="userInfo.avatarUrl || '/static/missing-face.png'" class="avatar"></image>
				<view class="info">
					<view class="name">{{ userInfo.realname || '-' }}</view>
					<view class="company">手机：{{ userInfo.phone || '-' }}</view>
					<view class="post">
						角色：
						<text v-for="(role, index) in userInfo.roles" :key="index">
							{{ role }}
							<!-- 如果不是最后一个角色，则显示逗号 -->
							{{ index < userInfo.roles.length - 1 ? ' | ' : '' }}
						</text>
					</view>
					<view class="post">上次登录：{{ userInfo.gmtLastLogin || '-' }}</view>
				</view>
				<!-- <view class="btn-logout" @click="logout">
					<image src="/static/logout.png" alt="登出"></image>
					<view>登出</view>
				</view> -->
			</view>
		</view>
		<view class="sign-box" v-if="!qiandao.length">
			<view class="sign-state sign-none">
				<text>今日未打卡，请进入项目详情页进行打卡！</text>
			</view>
		</view>
		<view class="sign-box" v-if="qiandao.length">
			<view class="sign-state">
				<view>今日首次打卡</view>
				<text>{{ qiandaoPrev | dateFormat(qiandaoPrev) || '-' }}</text>
			</view>
			<view class="sign-state">
				<view>今日末次打卡</view>
				<text>{{ qiandaoLast | dateFormat(qiandaoLast) || '-' }}</text>
			</view>
		</view>
		<view class="content-box">
			<view class="l-title-box">
				<view class="count">共 {{list.length}} 个项目</view>
				<view class="title">
					项目列表
				</view>
			</view>
			<view class="list-box flex">
				<view :class="'list-item-box txt-bg-' + (i % 3)" v-for="(v,i) in list" :key="i"
					@click="naviageToPage('/subPackages/subPackageA/pages/product/detail?id='+v.id)">
					<view class="txt-box">
						<view class="title">
							{{v.shopName || '-'}}
						</view>
						<view class="price-box">
							<view class="txt-small">
								<view class="label">进度: </view>
								<view class="value">
									<view class="progress-bar">
										<view class="progress-container">
											<view class="progress" :style="{ width: (v.jindu * 100 || 0) + '%' }">
												{{v.jindu * 100 || 0}}%
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="txt-small">
								<text class="label">乡镇：</text>
								<text class="value">{{v.area || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">片区：</text>
								<text class="value">{{v.pianarea || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">标段：</text>
								<text class="value">{{v.biaoduan || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">现场负责人：</text>
								<text class="value">{{v.fuzerenname || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">负责人电话：</text>
								<text class="value">{{v.shigongPhone || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">监理：</text>
								<text class="value">{{v.jianliname || '-'}}</text>
							</view>
							<view class="txt-small">
								<text class="label">监理电话：</text>
								<text class="value">{{v.jianliPhone || '-'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType" style="background: transparent;"></uni-load-more>
		<!-- <tabfabu /> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				blank_height: 0,
				categoryButtomList: [], //金刚区
				categoryTreeList: [], //分类
				flActive: 0,
				selFl: [],
				list: [],
				pageNo: 1,
				qiandao: [], //签到数据
				qiandaoPrev: '',
				qiandaoLast: '',
				loadingType: 'more',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
			};
		},
		onShow() {
			this.isVip = this.$api.isVip()
		},
		onLoad(options) {
			const that = this
			if (!that.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			} else {
				that.loadData();
				uni.getSystemInfo({
					success: (e) => {
						that.blank_height = e.statusBarHeight;
					}
				});
			}
			uni.getSystemInfo({
				success: (e) => {
					this.blank_height = e.statusBarHeight;
				}
			});
			//签到数据
			that.$api.request('admin.shopOne', 'queryQiandao', {}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				that.qiandao = res.data
				if (res.data.length === 1) {
					that.qiandaoPrev = res.data[0].gmtCreate;
					that.qiandaoLast = res.data[0].gmtCreate;
				} else if (res.data.length === 2) {
					that.qiandaoPrev = res.data[0].gmtCreate;
					that.qiandaoLast = res.data[1].gmtCreate;
				}
				uni.hideLoading()
			})
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '农业农村局监理平台',
				imageUrl: 'https://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/jianlishare.png',
				path: '/pages/index/index'
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageNo = 1;
			this.list = [];
			this.loadData();
		},
		onReachBottom() {
			if (this.loadingType === 'loading' || this.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			this.loadingType = 'loading';
			this.loadData();
		},
		methods: {
			loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('admin.userShop', 'listFront', {
					pageNo: that.pageNo
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.pageNo += 1;
					that.loadingType = res.data.totalPageNo > res.data.pageNo ? 'more' : 'nomore';
					if(that.loadingType === 'more' || that.pageNo === 2) {
						that.list = that.list.concat(res.data.items);
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},

			naviageToPage(url, id) {
				if (!url) {
					this.$api.msg("开发中~")
					return
				}
				if (id === 3) {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},

			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/subPackages/subPackageA/pages/product/detail?id=${id}`
				})
			},

			logout() {
				const that = this
				uni.showModal({
					title: '退出',
					content: '您确定要退出吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: (e) => {
						if (e.confirm) {
							that.$store.commit('logout')
							that.$api.logout()
							that.$api.globalData = {};
							uni.navigateTo({
								url: '/pages/public/login'
							})
						}
					}
				})
			},

		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #fff;
		box-shadow: 0 6upx 16upx rgba(0, 0, 0, 0.1);
		border-radius: 0 0 30upx 30upx;
		margin-bottom: $page-row-spacing;
		line-height: 40rpx;
		position: relative;

		.avatar {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
		}

		.info {
			margin-left: 30upx;
		}

		.name {
			font-size: $font-sm;
			color: #333;
		}

		.company {
			font-size: $font-pl;
			color: $font-color-light;
		}

		.post {
			font-size: $font-pl;
			color: $font-color-light;
		}

		.btn-logout {
			font-size: 28upx;
			text-align: right;
			display: inline-block;
			position: absolute;
			right: 0;
			z-index: 10;
			margin: $page-row-spacing;
			color: $font-color-base;
			padding: 20upx;
			border-left: 1upx solid #eee;

			image {
				width: 48upx;
				height: 48upx;
				margin-bottom: 5upx;
			}
		}
	}

	.sign-box {
		display: flex;
		margin: $page-row-spacing;

		.sign-state {
			box-shadow: 0 0rpx 4rpx rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
			padding: 15upx 30upx;
			text-align: center;
			background: #fff;
			line-height: 40upx;
			width: 50%;

			view {
				font-size: $font-sm;
				color: $font-color-dark;
			}

			text {
				font-size: $font-pl;
				color: $font-color-base;
			}
		}

		.sign-state:nth-child(1) {
			margin-right: 15upx;
			background: #fdffe7;
		}

		.sign-state:nth-child(2) {
			margin-left: 15upx;
			background: #d3ffff;
		}

		.sign-none {
			width: 100%;
			margin: 0 !important;

			text {
				color: $font-color-light;
			}
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		margin: 0;

		.uni-card {
			margin: 30upx !important;
			padding: 0 8px !important;
		}

		.titleNview-placing {
			height: 86upx;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			background: linear-gradient($a-color, $T);
		}
	}

	/* 金刚区 */
	.cate-section {
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 30upx;
		position: relative;
		z-index: 5;

		.cate-item {
			margin-bottom: 30upx;
			width: 25%;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.l-title-box {
		justify-content: space-between;
		margin: $page-row-spacing;
		border-bottom: 1upx solid #fff;
		position: relative;

		.count {
			color: $font-color-light;
			font-size: $font-sm;
			text-align: right;
			display: inline-block;
			float: right;
			height: 60upx;
			line-height: 60upx;
		}

		&::after {
			position: absolute;
			z-index: 1;
			bottom: 0;
			left: 0;
			width: 100%;
			border-bottom: 1px solid $border-color-base;
			content: '';
		}

		.title {
			padding: 0 20upx 0 $page-row-spacing;
			background: $a-color;
			color: #fff;
			font-size: $font-sm;
			display: inline-block;
			position: relative;
			height: 60upx;
			line-height: 60upx;

			&::after {
				position: absolute;
				z-index: 1;
				right: -57upx;
				content: '';
				width: 0;
				height: 0;
				border-left: 30upx solid $a-color;
				border-right: 30upx solid $T;
				border-top: 30upx solid $T;
				border-bottom: 30upx solid $a-color;
			}
		}
	}

	.list-box {
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 $page-row-spacing;

		.list-item-box {
			width: 100%;
			margin-bottom: $page-row-spacing;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			border-radius: 10upx;

			.spImg {
				width: 100%;
				height: 200upx;
			}

			.txt-box {
				line-height: 56upx;

				.title {
					font-size: $font-sm;
					font-weight: bold;
					box-shadow: 0 1upx 0upx rgba(0, 0, 0, 0.05);
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #fff;
					padding: 10upx 20upx;
				}

				.price-box {
					justify-content: space-between;
					font-size: $font-sm;
					padding: 15upx 20upx;

					.price {
						color: #fff;
						font-size: $font-sm;
					}
				}
			}
		}

		.txt-bg-0 {
			background: #8fa2f7;
			/* 柔和的蓝色 */
		}

		.txt-bg-1 {
			background: #1abce2;
			/* 淡蓝绿色 */
		}

		.txt-bg-2 {
			background: #b1a0e7;
			/* 淡紫色 */
		}
	}

	.txt-small {
		color: #fff;
		font-size: $font-sm;
		line-height: 46upx;
		display: flex;

		.label {
			width: 30%;
		}

		.value {
			width: 70%;
			display: flex;

			.progress-bar {
				width: 100%;
				height: 60upx;
				display: inline-flex;
			}

			.progress-container {
				width: 100%;
				height: 30upx;
				margin: 15upx 0;
				background-color: #e9e9e9;
				border-radius: 20upx;
				overflow: hidden;
				font-size: $font-pl;
				line-height: 30upx;
				text-indent: 10upx;
			}

			.progress {
				height: 100%;
				color: #fff;
				background-color: $a-color;
				transition: width 0.3s ease-in-out;
			}
		}
	}

	.uni-load-more__text {
		font-size: $font-sm !important;
	}
</style>